<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <title>聊天页</title>
</head>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
<body onbeforeunload="closeWebSocket()" onunload="closeWebSocket()">
    <div class="container">
        <div class="jumbotron">
            <h1>聊天室</h1>
            <p>你好， <span th:text="${nickname}" id="nickname"></span></p>
            <p>当前在线人数 <span id="onlineCount"></span></p>
            <p><a class="btn btn-primary btn-lg" th:href="@{/wc}" role="button" target="_blank">词频可视化</a></p>
        </div>
        <div class ="history">
             <ul class="list-group" id="his-msg">
             </ul>
        </div>
        <div class="row">
            <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="text" onkeypress="inputKeyDown(event)">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="send()">发送</button>
                        </span>
                    </div>
              </div>
        </div>
    </div>
</body>
<script>
    var websocket = null;

    let wsIP = "此处填写服务端IP"

    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
        var nickname = document.getElementById("nickname").innerText
        websocket = new WebSocket("ws://" + wsIP + ":8083/test/oneToMany/" + nickname);
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function() {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event) {
        //setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        var res = event.data
        console.log(res)
        var resarr = res.split("ꅄ")
        if(resarr[0] === "count"){
            onlineChange(resarr[1])
        }else if(resarr[0] === "msg"){
            setMessageInnerHTML(resarr[1])
        }

    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("close")
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onunload = closeWebSocket
    window.onbeforeunload = closeWebSocket



    // 更新当前在线人数
    function onlineChange(count) {
        var online = document.getElementById("onlineCount")
        online.innerText = count
    }

    function inputKeyDown(e){
        if(e.key === "Enter"){
            send()
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        var msg = "<li class=\"list-group-item\">" + innerHTML + "</li>"
        document.getElementById('his-msg').innerHTML += msg;
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close()
    }


    //发送消息
    function send() {
        var message = document.getElementById('text');

        if(message.value !== "" && message.value != null){
            var msg = "<li class=\"list-group-item\" style=\"background-color: #d4ffd4;\">" + "<span style=\"color: black;\">我：</span>" + message.value + "</li>"
            document.getElementById('his-msg').innerHTML +=  msg;
            websocket.send(message.value);
            message.value = ""
        }
    }
</script>
</html>